<template>
  <v-form ref="form" class="form pa-7">
    <v-container class="pa-0">
      <v-col>
        <v-row no-gutters>
          <v-col :cols="3" class="text-left">
            <span>Problem</span>
          </v-col>
          <v-col :cols="3" class="mr-3">
            <v-text-field
              v-model="problem"
              v-validate="'required'"
              name="Problem"
              hide-details
              dense
              class="white-input"
              solo
            ></v-text-field>
            <span class="vee-validate-error">
              {{ errors.first("Problem") }}
            </span>
          </v-col>
          <v-col :cols="2" gutters class="text-left">
            <span>Item Type</span>
          </v-col>
          <v-col :cols="2">
            <v-text-field
              v-model="itemType"
              v-validate="'required'"
              name="Item Type"
              hide-details
              dense
              class="white-input"
              solo
            ></v-text-field>
            <span class="vee-validate-error">
              {{ errors.first("Item Type") }}
            </span>
          </v-col>
        </v-row>
      </v-col>
      <v-col>
        <v-row no-gutters>
          <v-col :cols="3" class="text-left">
            <span>Problem Description</span>
          </v-col>
          <v-col class="text-left">
            <v-text-field
              v-model="description"
              v-validate="'required'"
              name="Problem Description"
              hide-details
              dense
              class="white-input"
              solo
            ></v-text-field>
            <span class="vee-validate-error">
              {{ errors.first("Problem Description") }}
            </span>
          </v-col>
        </v-row>
      </v-col>
      <v-col>
        <v-row no-gutters>
          <v-col :cols="3" class="text-left">
            <span>Seriousness</span>
          </v-col>
          <v-col :cols="8" class="text-left">
            <v-card flat width="37.5%">
              <v-text-field
                v-model.number="seriousness"
                v-validate="'required'"
                name="Seriousness"
                hide-details
                dense
                class="white-input"
                type="number"
                solo
              ></v-text-field>
            </v-card>
            <span class="vee-validate-error">
              {{ errors.first("Seriousness") }}
            </span>
          </v-col>
        </v-row>
      </v-col>
    </v-container>
  </v-form>
</template>

<script lang="ts">
import { Vue, Component } from "vue-property-decorator";
import VForm from "vuetify/src/components/VForm/index";
import { Pick } from "@/common/constants/Utils";
@Component({
  components: {},
})
export default class AddEditProblem extends Vue {
  id: string | null = "";
  problem: string | null = "";
  itemType: string | null = "";
  description: string | null = "";
  seriousness: number | null = null;
  resetForm() {
    this.id = null;
    type VFormInstance = InstanceType<typeof VForm>;
    const formRef = this.$refs.form as VFormInstance;
    formRef.reset();
  }

  setFormData(formData: object) {
    Object.assign(this, formData);
  }

  getFormData() {
    return Pick(this, [
      "id",
      "problem",
      "itemType",
      "description",
      "seriousness",
    ]);
  }

  async validateFormData() {
    const valid = await this.$validator.validate();
    if (valid) {
      return this.getFormData();
    } else {
      return false;
    }
  }
}
</script>

<style lang="scss" scoped>
@import "@/components/Maintenance/Dialog/DialogForm.scss";
</style>
